<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>健管服务</title>
    <link rel="stylesheet" href="../common/css/vant-index.css" />
    <style rel="stylesheet">
        body {
            background-color: #fff;
        }

        a {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        a:-webkit-any-link {
            color: #eee;
        }

        .item {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 0.5rem 0 0.5rem;
        }

        .left__img {
            /* flex: 1; */
            margin-right: 0.5rem;
            position: relative;
        }

        .right__details {
            flex: 1;
            position: relative;
            height: 8rem;
        }

        .service__name span {
            color: rgba(0, 0, 0, 0.75);
            /* line-height: 0.5rem; */
            font-size: 1rem;
            margin-right: 0.2rem;
        }

        .right-bottom__details span {
            color: #838181;
            font-size: 0.8rem;
            display: block;
            margin-bottom: 0.3rem;
        }

        img {
            width: 8rem;
            height: 6rem;
        }

        /*.tag1,
        .tag2,
        .tag3 {
            position: absolute;
            z-index: 999999;
            font-size: 0.75rem;
            color: white;
        }*/

        .service__name .tag1 {
            border-radius: 5px;
            color: #fff;
            background-color: #E22E30;
            padding: 3px 5px;
            font-size: 12px;
            margin-left: 5px;
        }

        .service__name .tag2 {
            border-radius: 5px;
            background-color: #F5F4F5;
            color: #999899;
            padding: 3px 5px;
            font-size: 12px;
            margin-left: 5px;
        }

        @media screen and (max-width: 280px) {
            html {
                font-size: 4vw;
            }

            .service__name span {
                font-size: 20%;
            }

            img {
                width: 40vw;
                height: 30vw;
            }

            .tag1,
            .tag2,
            .tag3 {
                border-radius: 5px;
            }

            .hide {
                display: none;
            }
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="container">
            <van-nav-bar v-if='!from' title="健管服务" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
            </van-nav-bar>

            <div v-if="flag == false">
                <van-empty description="当前没有服务记录" />
            </div>

            <div v-if="flag == true">
                <div class="item" v-for="(record,index) in currentData" :key="index"
                    @click="onClickService(record.packageName, record.packageId, record.status)">
                    <div class="left__img">
                        
                        <img :src="record.packageThumb" />
                    </div>
                    <div class="right__details">
                        <div class="service__name">
                            <br class="hide" />
                            <span>{{record.packageName}}</span>
                            <span class="tag1" v-show="record.status == 1">服务中</span>
	                        <span class="tag1" v-show="record.status == 2">待服务</span>
	                        <span class="tag2" v-show="record.status == 3">已结束</span>
                            <br class="hide" />
                            <br />
                            <div class="right-bottom__details">
                                <span>{{record.orgName}}</span>
                                <span>{{record.validPeriod}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>
<script src="../common/js/vue.global.prod.js"></script>
<script src="../common/js/vant.min.js"></script>
<script src="../common/js/axios.min.js"></script>
<script src="../common/js/url.min.js"></script>
<script src="../base.js"></script>
<script type="module">
    import {
        getAction,
        postAction,
        getUrl,
    } from "../common/js/api/vue3-axios-utils.js";

    const PatientData = {
        data() {
            return {
                url: {
                    getPatientServiceUrl: '/107/03/1070314'
                },
                currentData: {},
                flag: false,
            };
        },
        created() {
        		if(url('?userid')){
        			this.pid = url('?userid')
        		}else{
        			this.pid = localStorage.pid
        		}
        		if(url('?from')){
        			this.from = url('?from')
        		}
        		this.getData().catch((error) => {
                console.log(error);
            });
        },
        methods: {
            async getData() {
                let patientId = this.pid;
                let url = getUrl() + this.url.getPatientServiceUrl;

                const res = await postAction(url, {
                    patientId: patientId,
                });

                if (res.data.success) {
                    this.currentData = await res.data.result.records;

                    if (this.currentData.length >= 1) {
                        this.flag = true;
                    }

                    const transform = (str) => {
                        let tStrObject = new Date(Date.parse(str.replace('年', '-').replace('月', '-').replace('日', '')));
                        let goodStr = `${tStrObject.getFullYear()}/${tStrObject.getMonth() + 1}/${tStrObject.getDate()}`;
                        return goodStr;
                    }

                    this.currentData.forEach((item, index) => {
                        let dateArr = item.validPeriod.split("-")
                        let startStr = transform(dateArr[0]);
                        let endStr = transform(dateArr[1]);
                        let fullStr = `${startStr}~${endStr}`
                        item.fullStr = fullStr;
                    })
                }

            },
            onClickLeft() {
                window.location.href = "./index.html?userid=" + this.pid;
            },
            onClickService(title, packageId, status) {
                localStorage.serviceTitle = title;
                localStorage.packageId = packageId;
                localStorage.status = status;
                if(status!=2){
                		if(this.from){
                			window.location.href = "./hMService/service.html?userid="+this.pid+'&packageid='+packageId+'&from='+this.from;
                		}else{
                			window.location.href = "./hMService/service.html?userid="+this.pid+'&packageid='+packageId
                		}
                	}else{
                		this.$toast({
                			message:'服务暂未生效',
                		})
                	}
            	},
            persist() {
                localStorage.title = this.title;
            },
        },
    };

    const app = Vue.createApp(PatientData);

    app.use(vant);
    app.use(vant.Lazyload);

    app.mount("#app");
</script>

</html>